<div ng-controller="Core.CorePreferences">
  <form class="form-horizontal">

    <div class="control-group">
      <label class="control-label">Welcome page</label>

      <div class="controls">
        <input type="checkbox" ng-model="showWelcomePage">
        <span class="help-block">Show welcome page on startup</span>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="updateRate">Update rate</label>

      <div class="controls">
        <select id="updateRate" ng-model="updateRate">
          <option value="0">No refreshes</option>
          <option value="1000">1 second</option>
          <option value="2000">2 seconds</option>
          <option value="5000">5 seconds</option>
          <option value="10000">10 seconds</option>
          <option value="30000">30 seconds</option>
        </select>
        <span class="help-block">How frequently the data is updated in the browser
          <br/><i class='yellow text-shadowed icon-warning-sign'></i> <strong>Note:</strong> Setting this to "No Refreshes" will disable charting, as charting requires fetching periodic metric updates.
        </span>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">Host identification</label>

      <div class="controls">
        <button class="btn" ng-click="addRegexDialog.open()" title="Add regex"><i class="icon-plus"></i></button>
        <table ng-show="regexs.length">
          <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Regex</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat='regex in regexs track by $index'>
            <td>
              <i class="icon-remove clickable" ng-click="delete($index)"></i>
              <i class="icon-caret-up clickable" ng-hide="$first" ng-click="moveUp($index)"></i>
              <i class="icon-caret-down clickable" ng-hide="$last" ng-click="moveDown($index)"></i>
            </td>
            <td>
              {{regex.name}}
              <!--
              <editable-property class="inline-block" ng-model="regex" property="name"></editable-property>
              -->
            </td>
            <td>
              {{regex.regex}}
              <!--
              <editable-property class="inline-block" ng-model="regex" property="regex"></editable-property>
            -->
            </td>
            <td>
              <div hawtio-color-picker='regex.color'></div>
            </td>
          </tr>
          </tbody>
        </table>

        <div modal="addRegexDialog.show" ok-button-text="Add">
          <div class="modal-header"><h4>Add Host Regex</h4></div>
          <div class="modal-body dialog-body">
            <div simple-form name="hostRegexForm" data='hostSchema' entity='newHost' onSubmit="onOk()">
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger"
                    ng-click="addRegexDialog.close()">
              <i class="icon-remove"></i> Cancel
            </button>
            <button class="btn btn-primary"
                    hawtio-submit="hostRegexForm"
                    ng-disabled="!forms.hostRegexForm.$valid">
              <i class="icon-plus"></i> Add
            </button>
          </div>
        </div>

        <span class="help-block">For associating a label and colour in the bottom left indicator when connecting to different containers</span>
      </div>
    </div>
  </form>
</div>